<template>
    <div class="item">
        <div class="item-left">
            <img class="left_img" src="http://thirdwx.qlogo.cn/mmopen/qztxpSicM8xQaZYtiaJqsWhRwAWUribnTwVwVDUr0Pw5gb6OKpxl6l32YrDibcTiavjhPpQHY6pF7xh3fpYK3BLXOYOhvFIOiatUrv/0" alt="">
        </div>
        <div class="item-right">
            <div class="right-name">
                顾惜朝
            </div>
            <div class="right-desc">
                内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
            </div>
            <div class="right-time">
                2018-7-26
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LetterItem'
}
</script>

<style lang="stylus" scoped>
.item
    background-color: #ffffff
    height: 2rem
    display: flex
    border-bottom: 1px solid #dddddd
    .item-left
        width: 1.8rem
        height: 2rem
        text-align: center
        position: relative
        .left_img
            width: 1.3rem
            height: 1.3rem
            border-radius: 50%
            position: absolute 
            left:50%
            top:50%
            transform: translate(-50%,-50%)
    .item-right
        flex: 1
        padding: .25rem .2rem .2rem 0
        box-sizing: border-box
        position: relative
        .right-name
            font-size: .5rem
            margin-bottom: .2rem
        .right-desc
            height: .8rem
            line-height: .4rem
            color: #999999
            overflow:hidden 
            text-overflow:ellipsis
            display:-webkit-box 
            -webkit-box-orient:vertical
            -webkit-line-clamp:2
        .right-time
            position: absolute 
            top: .25rem
            right: .2rem
            font-size: .3rem
            color: #999999


</style>


